<template>
    <div :class='$style.container' >
      <div v-if="mode=='login' " :class='$style.login'  >
        <div class='flex align-center' :class='$style.input_wrap'>
          <v-icon name='yonghu c_white' :size='45' ></v-icon>
          <input name="name" v-model = 'login.userName' type="text" placeholder="User Name"/>
        </div>

        <div v-if="loginWay == 'password'" class='flex align-center' :class='$style.input_wrap'>
          <v-icon name='mima c_white'  :size='45' ></v-icon>
          <input name="password" v-model="login.password" type="password" placeholder="Password"/>
        </div>
      </div>


      <div
        @click= '$chooseLoginWay'
        class='text-center b_FS-24 c_white ptb15' >
        {{ loginWay == 'password'?'手势登陆' : '密码登陆' }}
      </div>

      <div v-if="mode== 'login' && loginWay == 'password' " :class='$style.btn' @click="$loginIn">
        {{ loginBtnText }}
      </div>
      <div v-if="mode== 'login' && loginWay == 'handLock'" :class='$style.btn' @click="$chooseHandLogin" >
        手势验证
      </div>

      <div v-if="mode== 'register'" :class='$style.register'>

        <div class='flex align-center' :class='$style.input_wrap'>
          <v-icon name='yonghu c_white' :size='45' ></v-icon>
          <input name="name" v-model = 'register.userName' type="text" placeholder="User Name"/>
        </div>
        <div class='flex align-center' :class='$style.input_wrap'>
          <v-icon  name='aui-icon-mobile c_white' :size='50' ></v-icon>
          <input name="name" v-model = 'register.phone' type="text" placeholder="mobile"/>
        </div>

        <div  class='flex align-center' :class='$style.input_wrap'>
          <v-icon name='mima c_white'  :size='45' ></v-icon>
          <input name="password" v-model="register.password" type="password" placeholder="Password"/>
        </div>
      </div>

      <div v-if="mode== 'register'"  :class='$style.btn' @click='$register'>
        注册
      </div>

      <div :class='$style.bottom_menu' class='flex'>
        <p class='text-left'>Forgot Password?</p>
        <p v-if="mode == 'login'" class="text-right" @click="mode = 'register'" >Sign Up >></p>
        <p v-if="mode == 'register'" class="text-right" @click="mode = 'login'" >Sign In >></p>
      </div>

    </div>
</template>
<script type="text/babel">

    import md5 from 'md5'
    import { Toast } from 'mint-ui'
    export default{
        data(){
            return{
              login:{
                userName : '' ,
                password : ''
              },
              register: {
                phone : '' ,
                userName : '' ,
                password : '',
              },
              mode : 'login' ,
              loginWay: 'password' ,// 密码 handLock 手势
              isSetRegisterHandLock : '',
              loginBtnText : '登陆' ,
              thinkToSetHandValidate:  false // 联想要去设置手势
            }
        },
        components:{

        },
        mounted(){

        },
        methods:{
          async $chooseLoginWay(){
            const type = this.loginWay
            this.loginWay = type == 'password' ? 'handLock' : 'password'
          },
          async $chooseHandLogin(){
            let res = await this.$get('/public/user/exist', {
              userName : this.login.userName
            }).catch( err =>{
              Toast( err.msg )
            })
            if( res && res.data.isExist ){
              if( !res.data.hasSetHandLock ) {
                Toast('未设置手势密码')
                this.loginWay = 'password'
                this.loginBtnText = '登陆并前往设置手势密码'
                this.thinkToSetHandValidate = true
              }
              else{
                this.$router.push('/handValidate?checkType=login&userName='+ this.login.userName)
              }
            }
          },
          async $loginIn (){
            let res = await this.$post('/public/user/login', {
              name : this.login.userName ,
              password: md5( this.login.password ) // md5 加密一次，避免明文
            }).catch(res=>{
              Toast( res.msg )
            })

            if( res ){
              localStorage.setItem('token', res.data.token)
              if( !this.thinkToSetHandValidate ){
                this.$router.push('/task')
              }
              else{
                this.$router.push('/handValidate?checkType=register')
              }
            }
          },
          async $register(){
            let res = await this.$post('/public/user/register',{
              name : this.register.userName ,
              phone: this.register.phone ,
              password : md5( this.register.password ), // md5 加密一次，避免明文
            }).catch(err=>{
              Toast(err.msg)
            })
            if( res ){
              localStorage.setItem('token', res.data.token)
              Toast('注册成功')
              this.$router.push('/handValidate?checkType=register')
            }
          }
        }
    }
</script>
<style module lang='scss'>
  .container{
    width: 100vw;
    height: 100vh ;
    background: url("@/assets/images/login-bg.png") 0 0 no-repeat  ;
    background-size: cover;
    >*{
      font-weight: bolder;
    }
    .login, .register{
      padding-top: 500px;
      input{
        width: 70%;
        font-size: 32px;
        text-align: left;
        background-color: transparent!important;
        padding: 15px 0 20px ;
        line-height: normal;
      }
      input:-webkit-autofill{
        background-color: transparent!important;
      }
      input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #C6CBCE;
        /* placeholder字体大小  */
        font-size: 40px;
        background-color: transparent;
        /* placeholder位置  */

      }
      .input_contain{

      }
      .input_wrap{
        margin: 10px 50px 30px;
        border-bottom: 4px solid #e5e5e5;
        i{
          padding: 8px;
          padding-left: 10px;
          padding-right: 15px;
          padding-bottom: 20px;
          font-weight: bold;
        }
      }


    }
    .btn{
      margin: 0px 50px ;
      border: 2px solid #fff;
      border-radius: 40px ;
      font-size: 32px;
      color: #fff ;
      padding: 25px;
    }
    .bottom_menu{
      position: absolute;
      bottom: 0;
      left: 0 ;
      padding: 30px 60px;
      width: 100vw;
      box-sizing: border-box;
      >p{
        flex:1 ;
        font-size: 28px;
      }
    }
  }
</style>
<style scoped>
    #handlock { width: 100%; height: auto;max-width: 500px; min-width: 300px; margin: 0 auto; position: relative;}
    #handlock .info{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 300px; height: 50px; background-color: rgba(255, 255, 255, 0.6);
    color: #f702ef; line-height: 50px; font-size: 22px; border-radius: 50px; display: none;}
    #handlock canvas{ margin: 0 auto; }
    #select{ font-size: 20px; font-weight: bold; }
    #select .message{ color: red; padding: 0 10px;}
    #select .radio label{ display: block; margin: 10px 0 }
</style>
